Register.render - Code Metrics - pamo18/pamo18.me - Measure and Improve Code Quality continuously with Scrutinizer

Register.render B
last analyzed 2019-10-10 11:44 UTC

↳ Parent: Register

Complexity

Conditions

Size

Total Lines	62
Code Lines	59

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	59
dl	0
loc	62
rs	8.3417
c	0
b	0
f	0
cc	4

How to fix Long Method

/*eslint max-len: ["error", { "code": 200 }]*/

import React, { Component } from 'react';
import DatePicker from './DatePicker.js';
import utils from '../../utils/utils.js';
import base from '../../config/api.js';
let api = base.api();

class Register extends Component {
    constructor(props) {
        super(props);
        this.registerSubmit = this.registerSubmit.bind(this);
        this.onPasswordChange = this.onPasswordChange.bind(this);
        this.toggleShowPassword = this.toggleShowPassword.bind(this);
        this.getCountries = this.getCountries.bind(this);
        this.commonCountries = this.commonCountries.bind(this);
        this.addToCommon = this.addToCommon.bind(this);
        this.state = {
            countries: "",
            commonOptions: "",
            commonCountries: "",
            showing: false,
            password: "",
            hidden: true,
            button: true,
            strength: 0
        };
    }
    componentDidMount() {
        this.getCountries();
        this.commonCountries();
    }
    registerSubmit(event) {
        const that = this;

        event.preventDefault();
        const data = new FormData(event.target);

        let person = {
            "name": data.get('name'),
            "birthday": data.get('date'),
            "country": data.get('country'),
            "email": data.get('email'),
            "password": data.get('password')
        };


        fetch(api + "/register", {
            method: 'POST',
            body: JSON.stringify(person),
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(function() {
            let common = {
                "countries": that.state.commonCountries.join(",")
            };

            fetch(api + "/common/countries", {
                method: 'POST',
                body: JSON.stringify(common),
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(that.props.history.push('/login'));
        });
    }
    addToCommon(e) {
        let common = this.state.commonCountries,
            country = e.target.value;

        if (common.includes(country)) {
            common.unshift(country);
            if (common.length > 3) {
                common.pop();
            }
            this.setState({
                commonCountries: common
            });
        }
    }
    commonCountries() {
        let commonOptions = [],
            commonCountries = [];

        const that = this;

        fetch(api + `/common/countries`)
            .then(res => res.json())
            .then(function(res) {
                let result = res.data.common.item;

                result = result.split(",");
                result.forEach(function (row) {
                    commonOptions.push(<option key={row} value={row.country}>{row}</option>);
                    commonCountries.push(row);
                });
                that.setState({
                    commonOptions: commonOptions,
                    commonCountries: commonCountries
                });
            });
    }
    getCountries() {
        let countries = [];

        const that = this;

        fetch(api + `/countries`)
            .then(res => res.json())
            .then(function(res) {
                let result = res.data.countries;

                result.forEach(function (row) {
                    countries.push(<option key={row.country} value={row.county}>{row.country}</option>);
                });
                that.setState({
                    countries: countries
                });
            });
    }
    onPasswordChange(e) {
        this.setState({
            strength: utils.passwordChecker(e.target.value),
            password: e.target.value
        });
    }
    toggleShowPassword() {
        this.setState({
            hidden: !this.state.hidden,
            button: !this.state.button
        });
    }
    render() {
        const { showing } = this.state;

        return (
            <div className="form-wrapper">
                <h1>Registration</h1>
                <p className="center">To be able to view your profile you must first register.</p>
                <form action="/login" className="form-register" onSubmit={this.registerSubmit}>
                    <label className="form-label">Username
                        <input className="form-input" type="text" name="name" required placeholder="Your username" />
                    </label>

                    <label className="form-label">Birthday
                        <input onClick={() => this.setState({ showing: !showing })} id="birthday" className="form-input" type="date" name="date" required placeholder="Click to choose!" />
                        { showing
                            ? <DatePicker />
                            : null
                        }
                    </label>

                    <label className="form-label">Country
                        <select onChange={this.addToCommon} className="form-input" type="text" name="country" required placeholder="Your current location">
                            <optgroup label="Common countries">
                                { this.state.commonOptions }
                            </optgroup>
                            <optgroup label="Other countries">
                                { this.state.countries }
                            </optgroup>
                        </select>
                    </label>

                    <label className="form-label">Email
                        <input className="form-input" type="email" name="email" required placeholder="[email protected]" />
                    </label>

                    <label className="form-label">Password: 1 capital letter, 1 number, 4+ characters long.
                        <input
                            className="form-input password"
                            type={this.state.hidden ? "password" : "text"}
                            name="password"
                            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,}"
                            value={this.state.password}
                            placeholder="Your password"
                            onChange={this.onPasswordChange}
                            required
                        />
                        <p><input type="checkbox" className="show-password" onClick={this.toggleShowPassword} /> {this.state.button ? "Show" : "Hide"} password</p>
                    </label>

                    <label className="form-label">Password strength
                        <meter className="form-meter" min="0" low="4" optimum="9" high="8" max="10" value={this.state.strength}></meter>
                    </label>

                    <label className="form-label check-label">
                        <input className="check-input" type="checkbox" name="gdpr" required />
                        I agree to the <a href="https://en.wikipedia.org/wiki/Terms_of_service">Terms and Conditions</a>
                    </label><br />


                    <input className="button form-button center" type="submit" name="register" value="Register" />
                </form>
            </div>
        );
    }
}

export default Register;


1			/eslint max-len: ["error", { "code": 200 }]/
2
3			import React, { Component } from 'react';
4			import DatePicker from './DatePicker.js';
5			import utils from '../../utils/utils.js';
6			import base from '../../config/api.js';
7			let api = base.api();
8
9			class Register extends Component {
10			constructor(props) {
11			super(props);
12			this.registerSubmit = this.registerSubmit.bind(this);
13			this.onPasswordChange = this.onPasswordChange.bind(this);
14			this.toggleShowPassword = this.toggleShowPassword.bind(this);
15			this.getCountries = this.getCountries.bind(this);
16			this.commonCountries = this.commonCountries.bind(this);
17			this.addToCommon = this.addToCommon.bind(this);
18			this.state = {
19			countries: "",
20			commonOptions: "",
21			commonCountries: "",
22			showing: false,
23			password: "",
24			hidden: true,
25			button: true,
26			strength: 0
27			};
28			}
29			componentDidMount() {
30			this.getCountries();
31			this.commonCountries();
32			}
33			registerSubmit(event) {
34			const that = this;
35
36			event.preventDefault();
37			const data = new FormData(event.target);
38
39			let person = {
40			"name": data.get('name'),
41			"birthday": data.get('date'),
42			"country": data.get('country'),
43			"email": data.get('email'),
44			"password": data.get('password')
45			};
46
47
48			fetch(api + "/register", {
49			method: 'POST',
50			body: JSON.stringify(person),
51			headers: {
52			'Content-Type': 'application/json'
53			}
54			}).then(function() {
55			let common = {
56			"countries": that.state.commonCountries.join(",")
57			};
58
59			fetch(api + "/common/countries", {
60			method: 'POST',
61			body: JSON.stringify(common),
62			headers: {
63			'Content-Type': 'application/json'
64			}
65			}).then(that.props.history.push('/login'));
66			});
67			}
68			addToCommon(e) {
69			let common = this.state.commonCountries,
70			country = e.target.value;
71
72			if (common.includes(country)) {
73			common.unshift(country);
74			if (common.length > 3) {
75			common.pop();
76			}
77			this.setState({
78			commonCountries: common
79			});
80			}
81			}
82			commonCountries() {
83			let commonOptions = [],
84			commonCountries = [];
85
86			const that = this;
87
88			fetch(api + `/common/countries`)
89			.then(res => res.json())
90			.then(function(res) {
91			let result = res.data.common.item;
92
93			result = result.split(",");
94			result.forEach(function (row) {
95			commonOptions.push(<option key={row} value={row.country}>{row}</option>);
96			commonCountries.push(row);
97			});
98			that.setState({
99			commonOptions: commonOptions,
100			commonCountries: commonCountries
101			});
102			});
103			}
104			getCountries() {
105			let countries = [];
106
107			const that = this;
108
109			fetch(api + `/countries`)
110			.then(res => res.json())
111			.then(function(res) {
112			let result = res.data.countries;
113
114			result.forEach(function (row) {
115			countries.push(<option key={row.country} value={row.county}>{row.country}</option>);
116			});
117			that.setState({
118			countries: countries
119			});
120			});
121			}
122			onPasswordChange(e) {
123			this.setState({
124			strength: utils.passwordChecker(e.target.value),
125			password: e.target.value
126			});
127			}
128			toggleShowPassword() {
129			this.setState({
130			hidden: !this.state.hidden,
131			button: !this.state.button
132			});
133			}
134			render() {
135			const { showing } = this.state;
136
137			return (
138			<div className="form-wrapper">
139			<h1>Registration</h1>
140			<p className="center">To be able to view your profile you must first register.</p>
141			<form action="/login" className="form-register" onSubmit={this.registerSubmit}>
142			<label className="form-label">Username
143			<input className="form-input" type="text" name="name" required placeholder="Your username" />
144			</label>
145
146			<label className="form-label">Birthday
147			<input onClick={() => this.setState({ showing: !showing })} id="birthday" className="form-input" type="date" name="date" required placeholder="Click to choose!" />
148			{ showing
149			? <DatePicker />
150			: null
151			}
152			</label>
153
154			<label className="form-label">Country
155			<select onChange={this.addToCommon} className="form-input" type="text" name="country" required placeholder="Your current location">
156			<optgroup label="Common countries">
157			{ this.state.commonOptions }
158			</optgroup>
159			<optgroup label="Other countries">
160			{ this.state.countries }
161			</optgroup>
162			</select>
163			</label>
164
165			<label className="form-label">Email
166			<input className="form-input" type="email" name="email" required placeholder="[email protected]" />
167			</label>
168
169			<label className="form-label">Password: 1 capital letter, 1 number, 4+ characters long.
170			<input
171			className="form-input password"
172			type={this.state.hidden ? "password" : "text"}
173			name="password"
174			pattern="(?=.\d)(?=.[a-z])(?=.*[A-Z]).{4,}"
175			value={this.state.password}
176			placeholder="Your password"
177			onChange={this.onPasswordChange}
178			required
179			/>
180			<p><input type="checkbox" className="show-password" onClick={this.toggleShowPassword} /> {this.state.button ? "Show" : "Hide"} password</p>
181			</label>
182
183			<label className="form-label">Password strength
184			<meter className="form-meter" min="0" low="4" optimum="9" high="8" max="10" value={this.state.strength}></meter>
185			</label>
186
187			<label className="form-label check-label">
188			<input className="check-input" type="checkbox" name="gdpr" required />
189			I agree to the <a href="https://en.wikipedia.org/wiki/Terms_of_service">Terms and Conditions</a>
190			</label><br />
191
192
193			<input className="button form-button center" type="submit" name="register" value="Register" />
194			</form>
195			</div>
196			);
197			}
198			}
199
200			export default Register;
201

pamo18 / pamo18.me

Register.render B last analyzed 2019-10-10 11:44 UTC

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like

Register.render B
last analyzed 2019-10-10 11:44 UTC